<template>
  <div class="center-setting pb120 pt40">
    <TitleCard
      title="政策查询"
      :showMore="false"
      :loading="loading"
      :isEmpty="isEmpty"
      :isSwitch="false"
      :type="'threeCard'"
    >
      <div class="policySearch">
        <Side
          :menuList="menuList"
          @sideMenuClick="sideMenuClick"
          :selectKeys="selectKeys"
        ></Side>
        <div class="policySearch-content">
          <div v-if="total === 0" class="emptyData">
            <img src="../../assets/images/nodata.png" alt="" />
          </div>
          <div v-else>
            <PolicySearchConent
              :contentList="contentList"
              @clickDetail="clickDetail"
            ></PolicySearchConent>
            <Pagination :total="total" @pageChange="pageChange"></Pagination>
          </div>
        </div>
      </div>
    </TitleCard>
  </div>
</template>

<script>
import Side from '@/views/components/side'
import PolicySearchConent from '@/views/components/pageComponents/policySearchConent'
import Pagination from '@/components/common/Pagination'
import { menuList, nameMap } from './config.js'
import { mapGetters, mapMutations } from 'vuex'
import mixinsBackStack from '@/views/backstageSupport/mixins'
import { getFrontContentPolicyList } from '@/api/contentPolicy'

export default {
  mixins: [mixinsBackStack],
  data() {
    return {
      params: {
        pageSize: 10,
        pageNum: 1,
      },
      loading: false,
      isEmpty: false,
      total: 0,
      menuList,
      nameMap,
      contentList: [],
      selectKeys: [],
      typeList: ['county', 'guangdong', 'foshan', 'hongkong']
    }
  },
  components: {
    Side,
    PolicySearchConent,
    Pagination
  },
  computed: {
    ...mapGetters('user', ['visitor']),
  },
  watch: {
    $route: {
      //刷新页面响应
      handler: function (val) {
        const { toComponent } = val.query
        this.selectKeys = [toComponent]
        this.initData(toComponent)
      },
      // 深度观察监听
      deep: true
    }
  },
  mounted() {
    this.initSetting()
  },
  methods: {
    ...mapMutations('headerMenu', ['updateMenuItemStatus']),
    initSetting() {
      const { toComponent } = this.$route.query
      const searchValue = toComponent ? toComponent : this.typeList[0]
      this.selectKeys = [searchValue]
      this.initData(searchValue)
    },
    async initData(typeItem) {
      const type = this.typeList.indexOf(typeItem)
      const { rows, total } = await getFrontContentPolicyList({ ...this.params, type })
      this.contentList = rows
      this.total = total
    },
    pageChange(e) {
      this.params.pageNum = e
      this.initSetting()
    },
    sideMenuClick(key) {  //统一由路由监控触发请求，否则会出现侧边栏选择其他，而路由没记录，点击政策菜单路由记录的点却没触发路由监听
      this.$router.push({ name: 'policySearch', query: { toComponent: key } })
    },
    clickDetail(item) {
      this.$router.push({ name: 'policySearchDetail', query: { id: item.id } })
    }
  }
}
</script>
